import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Modal} from "antd";
import {hideUpdateOrderFee, updateFee, updateOrderFee} from "./actions";
import FormEditor from "../../components/FormEditor";


class UpdateOrderFeeModal extends PureComponent {

    handleCreateRate = () => {
        const formEditor = this.formEditor.props.form;
        if (formEditor) {
            const {dispatch, fees, order} = this.props;
            formEditor.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    const updateModel = {"rowId": order.id, ...values, "type": "IN"};
                    dispatch(updateFee(updateModel)).then(action => {
                        if (action.error !== true) {
                            const found = fees.find(fee => fee.feeName === values.feeName);
                            if (found) {
                                found.feeCount = values.feeCount;
                            } else {
                                fees.push({
                                    "id": Math.random().toString(),
                                    "feeName": values.feeName,
                                    "feeCount": values.feeCount,
                                    "currency": values.currency
                                });
                            }
                            dispatch(updateOrderFee(fees));
                            dispatch(hideUpdateOrderFee());
                        }
                    });
                }
            });
        }
    };
    handleCancel = () => {
        const {dispatch} = this.props;
        dispatch(hideUpdateOrderFee());
    };

    render() {
        const {loading, visible, model, currencyList} = this.props;
        const schema = [
            {
                title: '基础信息',
                fields: [
                    {
                        field: 'feeName',
                        title: '费用科目',
                        type: 'text',
                        readonly: true
                    }, {
                        field: 'feeCount',
                        title: '金额',
                        type: 'number',
                        fieldOptions: {
                            rules: [{required: true, message: '请输入金额'}]
                        }
                    }, {
                        field: 'currency',
                        title: '币种',
                        type: 'listSelector',
                        controlProps: {
                            dataSource: currencyList,
                            labelField: "name",
                            valueField: "id"
                        },
                        fieldOptions: {
                            rules: [{required: true, message: '请选择币种'}]
                        }
                    }
                ]
            }];

        return (
            <Modal
                title="修改一行费用"
                visible={visible}
                onOk={this.handleCreateRate}
                onCancel={this.handleCancel}
                confirmLoading={loading}
                okText="确定"
                cancelText="取消"
                width="60%"
            >
                <FormEditor
                    schema={schema}
                    column={3}
                    defaultReadonly={false}
                    showActionBar={false}
                    defaultValues={model}
                    wrappedComponentRef={inst => (this.formEditor = inst)}
                />
            </Modal>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.ghOrderReceivable.updateFee,
        feeList: state.ghOrderReceivable.list.feeList,
        currencyList: state.ghOrderReceivable.list.currencyList,
        fees: state.ghOrderReceivable.orderFee.fees,
        order: state.ghOrderReceivable.modify.model
    };
};

export default connect(mapStateToProps)(UpdateOrderFeeModal);
